<template>
  <div>
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card hoverable title="用户数量（人）">
          <template #extra><a href="#">更多</a></template>
          <a-statistic title="" :value="112893"/>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable title="订单数量（单）">
          <template #extra><a href="#">更多</a></template>
          <a-statistic title="" :value="8955"/>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable title="成交数量">
          <template #extra><a href="#">更多</a></template>
          <a-statistic title="" :value="5654"/>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable title="应用数量">
          <template #extra><a href="#">更多</a></template>
          <a-statistic title="" :value="98952"/>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="16">
        <a-col :span="24" style="padding-top: 16px;">
            <a-card title="实时业绩排行榜" style="width: 100%;">
                <div>
                    <span>张东山（业绩目标：20w）</span>
                    <a-progress :percent="30" />
                </div>
                <div class="progress">
                    <span>张三（业绩目标：10w）</span>
                    <a-progress :percent="50" status="active" />
                </div>
                <div class="progress">
                    <span>李四（业绩目标：50w）</span>
                    <a-progress :percent="70" status="exception" />
                </div>
                <div class="progress">
                    <span>朗朗（业绩目标：100w）</span>
                    <a-progress :percent="100" />
                </div>
            </a-card>
        </a-col>
    </a-row>
    <a-row :gutter="16" style="padding-top: 16px;">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="张东山"
            :value="11.28"
            :precision="2"
            suffix="%"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <arrow-up-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="张三"
            :value="9.3"
            :precision="2"
            suffix="%"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          >
            <template #prefix>
              <arrow-down-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="李四"
            :value="11.28"
            :precision="2"
            suffix="%"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <arrow-up-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="朗朗"
            :value="9.3"
            :precision="2"
            suffix="%"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          >
            <template #prefix>
              <arrow-down-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
    components: {
        ArrowUpOutlined,
        ArrowDownOutlined,
    },
    setup() {
        return {
        }
    },
});
</script>
<style scoped>
.right{
    float: right;
}
.progress{
    margin-top: 2px;
}
</style>